<template>
    <div id="MemberList">
        <div class="breadcrumb ">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>
                <el-tag>会员管理</el-tag>
            </el-breadcrumb-item>
             <el-breadcrumb-item>
                <el-tag>会员列表</el-tag>
              </el-breadcrumb-item>
          </el-breadcrumb>
        </div> 
        <div class="table">
             <el-table
                :data="tableData.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase()))"
                borde
                style="width: 100%"
                height="550">
                <el-table-column
                  label="用户id"
                  prop="uid">
                </el-table-column>

                <el-table-column
                  label="用户名"
                  prop="username">
                </el-table-column>

                <el-table-column
                  label="账号"
                  prop="zhanghao">
                </el-table-column>

                <el-table-column
                  label="手机号码"
                  prop="mobile"
                  width='120'>
                </el-table-column>
                <el-table-column
                  label="是否VIP"
                  prop="vip">
                </el-table-column>

                <el-table-column
                  label="积分"
                >
                   <template slot-scope="scope">
                      <router-link :to="{path:'/index/memberList/jifen',query:{token:scope.row.token}}">{{scope.row.jifen}}</router-link>
                   </template>
                </el-table-column>


                <el-table-column
                  label="用户权限"
                >
                   <template slot-scope="scope">
                      <router-link :to="{path:'/index/memberList/quanxian',query:{token:scope.row.token}}">查看</router-link>
                   </template>
                </el-table-column>

                <el-table-column
                  label="状态"
                  prop="zhuangtai">
                </el-table-column>

                <el-table-column
                  align="right"
                  width='330'>
                  <template slot="header" slot-scope="scope">
                    <el-input
                      v-model="search"
                      size="mini"
                      placeholder="输入关键字搜索"/>
                  </template>

                  <template slot-scope="scope">
                    <el-button v-if="scope.row.zhuangtai==='启用'"
                      disabled
                      size="mini"
                      @click="handleEnable(scope.row.uid)">启用</el-button>
                    <el-button v-else
                      size="mini"
                      @click="handleEnable(scope.row.uid)">启用</el-button>
                    <el-button v-if="scope.row.zhuangtai==='禁用'"
                      disabled
                      size="mini"
                      type="primary"
                      @click="handleDisable(scope.row.uid)">禁用</el-button>
                    <el-button v-else
                      size="mini"
                      type="primary"
                      @click="handleDisable(scope.row.uid)">禁用</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDel(scope.row.uid)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
        </div>

        <router-view></router-view>
    </div>

</template>
<script>
    import { getMembers,memberEnable,memberDisable,memberDel } from './../../../service/api/index.js'
     export default{
       name:"GoodsList",
            data() {
              return {
                  tableData: [],
                     search: ''
              }
            },
            
           
            
          
   
            mounted(){
               
            },
            


            created(){
                 //请求网络数据   调用getVegetables返回promise对象，然后可以调用promise的then方法，返回请求到的数据(response.data)  
                      getMembers().then((response)=>{
                       console.log(response);
                      if (response.success) {
                         this.tableData = response.data;
                          for(var i=0;i<(this.tableData).length;i++){
                              //vip 1表示vip用户，0表示不是；
                              //userleixing 1表示采购员，0表示普通用户
                              //zhuangtai  1表示启用，-1表示禁用
                              if (this.tableData[i].vip===1) {
                                  this.tableData[i].vip='是';
                              }else if(this.tableData[i].vip===0){
                                   this.tableData[i].vip='否';
                              };

                              if (this.tableData[i].userleixing===1) {
                                  this.tableData[i].userleixing='采购员';
                              }else if (this.tableData[i].userleixing===0) {
                                   this.tableData[i].userleixing='普通用户';
                              };

                              if (this.tableData[i].zhuangtai===1) {
                                this.tableData[i].zhuangtai='启用';
                              }else if (this.tableData[i].zhuangtai===-1) {
                                  this.tableData[i].zhuangtai='禁用';
                              }
                          }
                       }
                 }).catch(error=>{
                       // todo......
                      console.log(error);
                 })   //---catch
            }, // ----created

            methods:{
                //启用用户
                 async handleEnable(uid){
                     //  console.log(uid);
                      let res = await memberEnable(uid);
                      //console.log(res);
                      if (res.status===200) {
                          this.$message({
                              message: '启用成功',
                              type: 'success'
                            });
                           window.location.reload();
                      } 
                  },
                  //禁用用户
                 async handleDisable(uid){
                  let res = await memberDisable(uid);
                       if (res.status===200) {
                        this.$message({
                            message: '禁用成功',
                            type: 'success'
                          });  
                         window.location.reload();
                      } 
                 },
                // 删除用户
                 async handleDel(uid){
                     let res = await memberDel(uid);
                     if (res.status===200) {
                         this.$message({
                              message: '删除用户成功',
                              type: 'success'
                            });
                          window.location.reload();
                     }
                 }
            }
     }
    
</script>
<style lang="less" scope>
   #MemberList{
     position:relative;
     width:100%;
     height:100%;
     background-color:#f5f5f5;
   }

    .breadcrumb {
     margin-right: 0.2rem;
     margin-left: 0.2rem;
     margin-top: 0.1rem;
     margin-bottom: 0.1rem;
     background-color:white;
     padding: 0.06rem;
     height:0.6rem;
     border-radius: 4px
   }
    
    .list{
      margin-left: 2rem;
      margin-right: 2rem;
   }
</style>